.LockScreenA22 {
    width: 100%;
    height: 100%;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    position: relative;
    z-index: 1;

    display: grid;
    place-items: center;
    -webkit-perspective: 500px;
    perspective: 500px;

    .x {
        grid-row: 1/-1;
        grid-column: 1/-1;
        border-radius: 12px;
        -webkit-animation: ease 2s alternate infinite;
        animation: ease 2s alternate infinite;
    }

    .x:nth-of-type(1) {
        box-shadow: 0 0 0.5vmin rgba(0, 0, 0, 0.1);
        border-radius: 1.2vmin;
        width: 4vmin;
        height: 4vmin;
        background: #ffede6;
        -webkit-animation-name: x-1;
        animation-name: x-1;
        -webkit-animation-delay: 80ms;
        animation-delay: 80ms;
        -webkit-transform: rotate(36deg);
        transform: rotate(36deg);
        z-index: 99;
    }

    @-webkit-keyframes x-1 {
        to {
            -webkit-transform: rotate(36deg) scale(0.6);
            transform: rotate(36deg) scale(0.6);
        }
    }

    @keyframes x-1 {
        to {
            -webkit-transform: rotate(36deg) scale(0.6);
            transform: rotate(36deg) scale(0.6);
        }
    }

    .x:nth-of-type(2) {
        box-shadow: 0 0 1vmin rgba(0, 0, 0, 0.1);
        border-radius: 1.4vmin;
        width: 8vmin;
        height: 8vmin;
        background: #fedacd;
        -webkit-animation-name: x-2;
        animation-name: x-2;
        -webkit-animation-delay: 160ms;
        animation-delay: 160ms;
        -webkit-transform: rotate(72deg);
        transform: rotate(72deg);
        z-index: 98;
    }

    @-webkit-keyframes x-2 {
        to {
            -webkit-transform: rotate(72deg) scale(0.6);
            transform: rotate(72deg) scale(0.6);
        }
    }

    @keyframes x-2 {
        to {
            -webkit-transform: rotate(72deg) scale(0.6);
            transform: rotate(72deg) scale(0.6);
        }
    }

    .x:nth-of-type(3) {
        box-shadow: 0 0 1.5vmin rgba(0, 0, 0, 0.1);
        border-radius: 1.6vmin;
        width: 12vmin;
        height: 12vmin;
        background: #fdc6b5;
        -webkit-animation-name: x-3;
        animation-name: x-3;
        -webkit-animation-delay: 240ms;
        animation-delay: 240ms;
        -webkit-transform: rotate(108deg);
        transform: rotate(108deg);
        z-index: 97;
    }

    @-webkit-keyframes x-3 {
        to {
            -webkit-transform: rotate(108deg) scale(0.6);
            transform: rotate(108deg) scale(0.6);
        }
    }

    @keyframes x-3 {
        to {
            -webkit-transform: rotate(108deg) scale(0.6);
            transform: rotate(108deg) scale(0.6);
        }
    }

    .x:nth-of-type(4) {
        box-shadow: 0 0 2vmin rgba(0, 0, 0, 0.1);
        border-radius: 1.8vmin;
        width: 16vmin;
        height: 16vmin;
        background: #fbb09d;
        -webkit-animation-name: x-4;
        animation-name: x-4;
        -webkit-animation-delay: 320ms;
        animation-delay: 320ms;
        -webkit-transform: rotate(144deg);
        transform: rotate(144deg);
        z-index: 96;
    }

    @-webkit-keyframes x-4 {
        to {
            -webkit-transform: rotate(144deg) scale(0.6);
            transform: rotate(144deg) scale(0.6);
        }
    }

    @keyframes x-4 {
        to {
            -webkit-transform: rotate(144deg) scale(0.6);
            transform: rotate(144deg) scale(0.6);
        }
    }

    .x:nth-of-type(5) {
        box-shadow: 0 0 2.5vmin rgba(0, 0, 0, 0.1);
        border-radius: 2vmin;
        width: 20vmin;
        height: 20vmin;
        background: #f99986;
        -webkit-animation-name: x-5;
        animation-name: x-5;
        -webkit-animation-delay: 400ms;
        animation-delay: 400ms;
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
        z-index: 95;
    }

    @-webkit-keyframes x-5 {
        to {
            -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6);
        }
    }

    @keyframes x-5 {
        to {
            -webkit-transform: rotate(180deg) scale(0.6);
            transform: rotate(180deg) scale(0.6);
        }
    }

    .x:nth-of-type(6) {
        box-shadow: 0 0 3vmin rgba(0, 0, 0, 0.1);
        border-radius: 2.2vmin;
        width: 24vmin;
        height: 24vmin;
        background: #f6816f;
        -webkit-animation-name: x-6;
        animation-name: x-6;
        -webkit-animation-delay: 480ms;
        animation-delay: 480ms;
        -webkit-transform: rotate(216deg);
        transform: rotate(216deg);
        z-index: 94;
    }

    @-webkit-keyframes x-6 {
        to {
            -webkit-transform: rotate(216deg) scale(0.6);
            transform: rotate(216deg) scale(0.6);
        }
    }

    @keyframes x-6 {
        to {
            -webkit-transform: rotate(216deg) scale(0.6);
            transform: rotate(216deg) scale(0.6);
        }
    }

    .x:nth-of-type(7) {
        box-shadow: 0 0 3.5vmin rgba(0, 0, 0, 0.1);
        border-radius: 2.4vmin;
        width: 28vmin;
        height: 28vmin;
        background: #f36859;
        -webkit-animation-name: x-7;
        animation-name: x-7;
        -webkit-animation-delay: 560ms;
        animation-delay: 560ms;
        -webkit-transform: rotate(252deg);
        transform: rotate(252deg);
        z-index: 93;
    }

    @-webkit-keyframes x-7 {
        to {
            -webkit-transform: rotate(252deg) scale(0.6);
            transform: rotate(252deg) scale(0.6);
        }
    }

    @keyframes x-7 {
        to {
            -webkit-transform: rotate(252deg) scale(0.6);
            transform: rotate(252deg) scale(0.6);
        }
    }

    .x:nth-of-type(8) {
        box-shadow: 0 0 4vmin rgba(0, 0, 0, 0.1);
        border-radius: 2.6vmin;
        width: 32vmin;
        height: 32vmin;
        background: #ef4f43;
        -webkit-animation-name: x-8;
        animation-name: x-8;
        -webkit-animation-delay: 640ms;
        animation-delay: 640ms;
        -webkit-transform: rotate(288deg);
        transform: rotate(288deg);
        z-index: 92;
    }

    @-webkit-keyframes x-8 {
        to {
            -webkit-transform: rotate(288deg) scale(0.6);
            transform: rotate(288deg) scale(0.6);
        }
    }

    @keyframes x-8 {
        to {
            -webkit-transform: rotate(288deg) scale(0.6);
            transform: rotate(288deg) scale(0.6);
        }
    }

    .x:nth-of-type(9) {
        box-shadow: 0 0 4.5vmin rgba(0, 0, 0, 0.1);
        border-radius: 2.8vmin;
        width: 36vmin;
        height: 36vmin;
        background: #ea342e;
        -webkit-animation-name: x-9;
        animation-name: x-9;
        -webkit-animation-delay: 720ms;
        animation-delay: 720ms;
        -webkit-transform: rotate(324deg);
        transform: rotate(324deg);
        z-index: 91;
    }

    @-webkit-keyframes x-9 {
        to {
            -webkit-transform: rotate(324deg) scale(0.6);
            transform: rotate(324deg) scale(0.6);
        }
    }

    @keyframes x-9 {
        to {
            -webkit-transform: rotate(324deg) scale(0.6);
            transform: rotate(324deg) scale(0.6);
        }
    }

    .x:nth-of-type(10) {
        box-shadow: 0 0 5vmin rgba(0, 0, 0, 0.1);
        border-radius: 3vmin;
        width: 40vmin;
        height: 40vmin;
        background: #e61919;
        -webkit-animation-name: x-10;
        animation-name: x-10;
        -webkit-animation-delay: 800ms;
        animation-delay: 800ms;
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
        z-index: 90;
    }

    @-webkit-keyframes x-10 {
        to {
            -webkit-transform: rotate(360deg) scale(0.6);
            transform: rotate(360deg) scale(0.6);
        }
    }

    @keyframes x-10 {
        to {
            -webkit-transform: rotate(360deg) scale(0.6);
            transform: rotate(360deg) scale(0.6);
        }
    }

    .x:nth-of-type(11) {
        box-shadow: 0 0 5.5vmin rgba(0, 0, 0, 0.1);
        border-radius: 3.2vmin;
        width: 44vmin;
        height: 44vmin;
        background: #cc191f;
        -webkit-animation-name: x-11;
        animation-name: x-11;
        -webkit-animation-delay: 880ms;
        animation-delay: 880ms;
        -webkit-transform: rotate(396deg);
        transform: rotate(396deg);
        z-index: 89;
    }

    @-webkit-keyframes x-11 {
        to {
            -webkit-transform: rotate(396deg) scale(0.6);
            transform: rotate(396deg) scale(0.6);
        }
    }

    @keyframes x-11 {
        to {
            -webkit-transform: rotate(396deg) scale(0.6);
            transform: rotate(396deg) scale(0.6);
        }
    }

    .x:nth-of-type(12) {
        box-shadow: 0 0 6vmin rgba(0, 0, 0, 0.1);
        border-radius: 3.4vmin;
        width: 48vmin;
        height: 48vmin;
        background: #b41823;
        -webkit-animation-name: x-12;
        animation-name: x-12;
        -webkit-animation-delay: 960ms;
        animation-delay: 960ms;
        -webkit-transform: rotate(432deg);
        transform: rotate(432deg);
        z-index: 88;
    }

    @-webkit-keyframes x-12 {
        to {
            -webkit-transform: rotate(432deg) scale(0.6);
            transform: rotate(432deg) scale(0.6);
        }
    }

    @keyframes x-12 {
        to {
            -webkit-transform: rotate(432deg) scale(0.6);
            transform: rotate(432deg) scale(0.6);
        }
    }

    .x:nth-of-type(13) {
        box-shadow: 0 0 6.5vmin rgba(0, 0, 0, 0.1);
        border-radius: 3.6vmin;
        width: 52vmin;
        height: 52vmin;
        background: #9b1724;
        -webkit-animation-name: x-13;
        animation-name: x-13;
        -webkit-animation-delay: 1040ms;
        animation-delay: 1040ms;
        -webkit-transform: rotate(468deg);
        transform: rotate(468deg);
        z-index: 87;
    }

    @-webkit-keyframes x-13 {
        to {
            -webkit-transform: rotate(468deg) scale(0.6);
            transform: rotate(468deg) scale(0.6);
        }
    }

    @keyframes x-13 {
        to {
            -webkit-transform: rotate(468deg) scale(0.6);
            transform: rotate(468deg) scale(0.6);
        }
    }

    .x:nth-of-type(14) {
        box-shadow: 0 0 7vmin rgba(0, 0, 0, 0.1);
        border-radius: 3.8vmin;
        width: 56vmin;
        height: 56vmin;
        background: #841524;
        -webkit-animation-name: x-14;
        animation-name: x-14;
        -webkit-animation-delay: 1120ms;
        animation-delay: 1120ms;
        -webkit-transform: rotate(504deg);
        transform: rotate(504deg);
        z-index: 86;
    }

    @-webkit-keyframes x-14 {
        to {
            -webkit-transform: rotate(504deg) scale(0.6);
            transform: rotate(504deg) scale(0.6);
        }
    }

    @keyframes x-14 {
        to {
            -webkit-transform: rotate(504deg) scale(0.6);
            transform: rotate(504deg) scale(0.6);
        }
    }

    .x:nth-of-type(15) {
        box-shadow: 0 0 7.5vmin rgba(0, 0, 0, 0.1);
        border-radius: 4vmin;
        width: 60vmin;
        height: 60vmin;
        background: #6c1322;
        -webkit-animation-name: x-15;
        animation-name: x-15;
        -webkit-animation-delay: 1200ms;
        animation-delay: 1200ms;
        -webkit-transform: rotate(540deg);
        transform: rotate(540deg);
        z-index: 85;
    }

    @-webkit-keyframes x-15 {
        to {
            -webkit-transform: rotate(540deg) scale(0.6);
            transform: rotate(540deg) scale(0.6);
        }
    }

    @keyframes x-15 {
        to {
            -webkit-transform: rotate(540deg) scale(0.6);
            transform: rotate(540deg) scale(0.6);
        }
    }

    .x:nth-of-type(16) {
        box-shadow: 0 0 8vmin rgba(0, 0, 0, 0.1);
        border-radius: 4.2vmin;
        width: 64vmin;
        height: 64vmin;
        background: #56101e;
        -webkit-animation-name: x-16;
        animation-name: x-16;
        -webkit-animation-delay: 1280ms;
        animation-delay: 1280ms;
        -webkit-transform: rotate(576deg);
        transform: rotate(576deg);
        z-index: 84;
    }

    @-webkit-keyframes x-16 {
        to {
            -webkit-transform: rotate(576deg) scale(0.6);
            transform: rotate(576deg) scale(0.6);
        }
    }

    @keyframes x-16 {
        to {
            -webkit-transform: rotate(576deg) scale(0.6);
            transform: rotate(576deg) scale(0.6);
        }
    }

    .x:nth-of-type(17) {
        box-shadow: 0 0 8.5vmin rgba(0, 0, 0, 0.1);
        border-radius: 4.4vmin;
        width: 68vmin;
        height: 68vmin;
        background: #3f0d19;
        -webkit-animation-name: x-17;
        animation-name: x-17;
        -webkit-animation-delay: 1360ms;
        animation-delay: 1360ms;
        -webkit-transform: rotate(612deg);
        transform: rotate(612deg);
        z-index: 83;
    }

    @-webkit-keyframes x-17 {
        to {
            -webkit-transform: rotate(612deg) scale(0.6);
            transform: rotate(612deg) scale(0.6);
        }
    }

    @keyframes x-17 {
        to {
            -webkit-transform: rotate(612deg) scale(0.6);
            transform: rotate(612deg) scale(0.6);
        }
    }

    .x:nth-of-type(18) {
        box-shadow: 0 0 9vmin rgba(0, 0, 0, 0.1);
        border-radius: 4.6vmin;
        width: 72vmin;
        height: 72vmin;
        background: #2a0912;
        -webkit-animation-name: x-18;
        animation-name: x-18;
        -webkit-animation-delay: 1440ms;
        animation-delay: 1440ms;
        -webkit-transform: rotate(648deg);
        transform: rotate(648deg);
        z-index: 82;
    }

    @-webkit-keyframes x-18 {
        to {
            -webkit-transform: rotate(648deg) scale(0.6);
            transform: rotate(648deg) scale(0.6);
        }
    }

    @keyframes x-18 {
        to {
            -webkit-transform: rotate(648deg) scale(0.6);
            transform: rotate(648deg) scale(0.6);
        }
    }

    .x:nth-of-type(19) {
        box-shadow: 0 0 9.5vmin rgba(0, 0, 0, 0.1);
        border-radius: 4.800000000000001vmin;
        width: 76vmin;
        height: 76vmin;
        background: #15050a;
        -webkit-animation-name: x-19;
        animation-name: x-19;
        -webkit-animation-delay: 1520ms;
        animation-delay: 1520ms;
        -webkit-transform: rotate(684deg);
        transform: rotate(684deg);
        z-index: 81;
    }

    @-webkit-keyframes x-19 {
        to {
            -webkit-transform: rotate(684deg) scale(0.6);
            transform: rotate(684deg) scale(0.6);
        }
    }

    @keyframes x-19 {
        to {
            -webkit-transform: rotate(684deg) scale(0.6);
            transform: rotate(684deg) scale(0.6);
        }
    }

    .x:nth-of-type(20) {
        box-shadow: 0 0 10vmin rgba(0, 0, 0, 0.1);
        border-radius: 5vmin;
        width: 80vmin;
        height: 80vmin;
        background: #000;
        -webkit-animation-name: x-20;
        animation-name: x-20;
        -webkit-animation-delay: 1600ms;
        animation-delay: 1600ms;
        -webkit-transform: rotate(720deg);
        transform: rotate(720deg);
        z-index: 80;
    }

    @-webkit-keyframes x-20 {
        to {
            -webkit-transform: rotate(720deg) scale(0.6);
            transform: rotate(720deg) scale(0.6);
        }
    }

    @keyframes x-20 {
        to {
            -webkit-transform: rotate(720deg) scale(0.6);
            transform: rotate(720deg) scale(0.6);
        }
    }


}